<template>
  <div class="login">
    <head_top head_back="true" title_head ="登录"></head_top>
    <div class="info-wrap">
      <div class="top-img">
        <img class="img-responsive" src="../../../image/cont00.png" alt="">
        <span>请登录哦</span>
      </div>
      <div class="user">
        <span style="margin-right: 10px;">账号:</span>
        <span><input type="text"></span>
      </div>
      <div class="password">
        <span style="margin-right: 10px;">密码:</span>
        <span>
          <input id="pw" type="password">
          <i id="see" :class="{ show: see }" @click="togg()"></i>
        </span>
      </div>
      <div class="forget">
        <span @click="$router.push('/forget')">忘记密码</span>
        <span style="margin-left: 10px;" @click="$router.push('/register')">注册账号</span>
      </div>
      <div class="authorInfo">SharkChilli - 737213494@qq.com</div>
    </div>
    <transition name="fade" mode="out-in"><router-view class="info-contariner"></router-view></transition>
  </div>
</template>

<script>
  import head_top from '../../header'
export default {
  name: 'login',
  data () {
    return {
      see: true,
    }
  },
  components: {
    head_top
  },
  mounted: function() {

  },
  methods: {
      togg(){
        var self = this;
        let obj1 = $("#see");
        let obj2 = $("#pw");
        if(obj1.hasClass("show")){
            obj2.attr("type","text");
            self.see = false;
        }else{
            obj2.attr("type","password");
          self.see = true;
        }
      },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 666;
    font-family: "微软雅黑";
    color: #2aaa6d;
}
.info-wrap {
  margin-top: 50px;
  width: 100%;
  height: 100%;
  background: white;
}
.info-wrap div {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.info-wrap div span {
  position: relative;
  font-size: 14px;
}

.info-wrap div span input{
  height: 24px;
  outline: none;
  padding-left: 5px;
  border-radius: 5px;
  border: 1px solid #2aaa6d
}
.info-wrap div span i{
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  background: url("../../../image/veye.png") center no-repeat;
  background-size: 16px;
}
.info-wrap div span i.show{
  background: url("../../../image/veye2.png") center no-repeat;
  background-size: 16px;
}
.info-wrap .top-img {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: 20px;
  width: 60px;
  height: 50px;
}
.info-wrap .user {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
.info-wrap .authorInfo {
  font-size: 8px;
  margin-top: 5px;
  color: rgba(37,148,95,.4);
}
.info-wrap .forget {
  margin-top: 5px;
}
</style>
